<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            @changePage="handleChangePage"
            :list="list"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button @click="changeOrderType(2)">
                                <Icon style="margin-top: -1px;" type="md-add" size="18" />订单确认
                            </Button>
                            <Button style="margin: 0 10px" @click="changeOrderType(6)">
                                <Icon style="margin-top: -1px;" type="md-trash" size="17" />订单作废
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <Select v-model="search.type" style="width:100px;margin:0 10px" placeholder="类别" @on-change="handleState">
                            <Option value>全部</Option>
                            <Option value="1">陪诊</Option>
                            <Option value="2">送药</Option>
                            <Option value="3">护理</Option>
                        </Select>
                        <Select v-model="search.state" style="width:120px;margin:0 10px" placeholder="状态" @on-change="handleState">
                            <Option value>全部</Option>
                            <Option value="0">待付款</Option>
                            <Option value="1">待确认</Option>
                            <Option value="2">已确认</Option>
                            <Option value="3">已接单</Option>
                            <Option value="4">服务开始</Option>
                            <Option value="5">服务完成</Option>
                            <Option value="6">已取消</Option>
                            <Option value="7">已退款</Option>
                        </Select>
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入订单号 / 服务项目" />
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" :width="modalWidth">
            <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                <Row>
                    <i-col :lg="{ span: 12}">
                        <FormItem label="选择门店" prop="SpecName">
                            <CheckboxGroup v-model="formItem.checkAllGroup">
                                <P v-for="(item,index) in shopData" :key="index">
                                    <Checkbox :label="item.ID + ''">{{item.ShopName}}</Checkbox>
                                </P>
                            </CheckboxGroup>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 *  服务订单
 */
import { cyclicRouting, getdate } from '@/util';
import { getModulePermission } from '@/api/user';
import Api from './service';
import GlobalTables from '@/components/GlobalTables';

export default {
    name: 'PurchaseList',
    components: {
        GlobalTables
    },
    data() {
        return {
            list: [],
            shopData: [],
            total: 0,
            itemId: 0,
            isView: false,
            loading: true,
            isModal: false,
            allSelectArr: null,
            id: 0,
            modalWidth: 600,
            ModalTitle: '订单指派',
            formItem: {
                checkAllGroup: []
            },
            ruleValidate: {},
            search: {
                keyword: '',
                state: '1',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '订单号',
                    width: 250,
                    key: 'OrderNum'
                },
                {
                    title: '服务项目',

                    key: 'OrderServerName'
                },
                {
                    title: '类别',
                    width: 120,
                    key: 'OrderType'
                },
                {
                    title: '支付方式',
                    width: 120,
                    key: 'PayType'
                },
                {
                    title: '预约时间',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            params.row.BookingTime &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(new Date(params.row.BookingTime).getTime())
                                )
                        ]);
                    }
                },
                {
                    title: '价格',
                    width: 120,
                    key: 'Money_Total'
                },
                {
                    title: '预约人',
                    width: 100,
                    key: 'ApplyUser'
                },
                {
                    title: '状态',
                    width: 100,
                    key: 'SubTotal',
                    render: (h, params) => {
                        const { State } = params.row;
                        if (State == 0) {
                            return h('div', [h('span', {}, '待付款')]);
                        } else if (State == 1) {
                            return h('div', [h('span', {}, '待确认')]);
                        } else if (State == 2) {
                            return h('div', [h('span', {}, '已确认')]);
                        } else if (State == 3) {
                            return h('div', [h('span', {}, '已接单')]);
                        } else if (State == 4) {
                            return h('div', [h('span', {}, '服务开始')]);
                        } else if (State == 5) {
                            return h('div', [h('span', {}, '服务完成')]);
                        } else if (State == 6) {
                            return h('div', [h('span', {}, '已取消')]);
                        } else if (State == 7) {
                            return h('div', [h('span', {}, '已退款')]);
                        }
                    }
                },
                {
                    title: '下单时间',
                    width: 120,
                    key: 'CreateTime',
                    render: (h, params) => {
                        return h('div', [
                            params.row.CreateTime &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(new Date(params.row.CreateTime).getTime())
                                )
                        ]);
                    }
                },
                {
                    title: '操作',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleAssign(params.row.ID);
                                        }
                                    }
                                },
                                '指派'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleGoDetails(params.row.ID);
                                        }
                                    }
                                },
                                '详情'
                            )
                        ]);
                    }
                }
            ]
        };
    },
    methods: {
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            Api.getTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        // 指派
        handleAssign(id) {
            this.isModal = true;
            this.allSelectArr = [];
            this.id = id;
        },
        //状态改变
        handleState() {
            this.getTablesListData();
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
            this.allSelectArrs = list;
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    Api.orderEdit({
                        ID: this.id,
                        State: 4,
                        ShopID: this.formItem.checkAllGroup.join(',')
                    }).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功');
                            this.loading = true;
                            this.getTablesListData();
                            this.isModal = false;
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        // 更改订单状态
        changeOrderType(type) {
            if (!this.allSelectArr) {
                this.$Message.error('请选择一条服务订单');
                return;
            }
            if (this.allSelectArr.length > 2) {
                this.$Message.error('请选择一条服务订单');
                return;
            }
            if (type == 2) {
                if (this.allSelectArrs[0].State != '1') {
                    this.$Message.error('当前状态不可以操作');
                    return;
                }
            } else {
                if (
                    this.allSelectArrs[0].State == '0' ||
                    this.allSelectArrs[0].State == '1' ||
                    this.allSelectArrs[0].State == '2'
                ) {
                    return
                } else {
                    this.$Message.error('当前状态不可以操作');
                    return;
                }
            }

            this.$Modal.confirm({
                title: `你确定要${type == 2 ? '确认' : '作废'}吗`,
                onOk: () => {
                    Api.orderEdit({
                        ID: this.allSelectArr.substring(0, 3),
                        State: type,
                        ShopID: 0
                    }).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功');
                            this.loading = true;
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消成功');
                }
            });
        },
        // 查看服务详情
        handleGoDetails(id) {
            this.$router.push({
                path: `/orders-servier-details/${id}`
            });
        },
        getShopTablesList() {
            Api.getShopTablesList().then(res => {
                this.shopData = res.data.rows;
            });
        }
    },
    mounted() {
        cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
            getModulePermission({
                roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                moduleid: id
            }).then(() => {
                this.getTablesListData();
                this.getShopTablesList();
            });
        });
    }
};
</script>
<style lang="less" scoped>
.view-bottom {
    margin-top: 20px;
}

.view-top-lable {
    margin-right: 10px;
}

.modal-title {
    font-size: 22px;
}
</style>
